<template>
  <div class="drawer">
    <!-- 遮罩层 -->
    <div class="mask-show" v-if="drawerShow" @click="close()" ></div>
    <!-- 抽屉层 -->
    <div class="setbox" :class="{show: drawerShow}">
      <!-- header -->
      <div class="header" >
        <div class="left" v-if="webscoketStatus != 'webscoketChat'">
          <span class="chat-title">即时聊天</span> 
        </div>
        <div class="left" v-else>
          <img src="../../assets/img/front.png" alt="" class="back-img cursor" @click="goBackUserList()"> 
          <span class="title-badge" v-if="totalUnReadNumber">{{totalUnReadNumber}}</span>
          <span class="chat-title">{{to_user_name}}</span>
        </div>
        <div class="right">
          <img src="../../assets/img/close.png" alt="" class="width22 cursor" @click="close()">
        </div>
      </div>


      <!-- 登录按钮 -->
      <div class="go-login" v-if="webscoketStatus == 'login'">
        <p @click="showLogin()">您未登录，点我登录。</p> 
      </div>


      <!-- webscoket 用户列表-->
      <div v-else-if="webscoketStatus == 'webscoketList'">
        <div class="user-div cursor" @click="enterDialog('AI聊天','https://resource.guanchao.site/uploads/im/aichat.png','','','AIchat')">
          <div class="left userlogo-div" >
            <img src="https://resource.guanchao.site/uploads/im/aichat.png" class="userlogo cursor">
          </div>
          <div class="userlogo-div">
            <span class="padding-left10">AI聊天</span>
          </div>
          
        </div>
        <div v-for="(item, index) in webscoketUserList" :key="index" class="user-div cursor" @click="enterDialog(item.username,item.userlogo,item.id,item.fd,'userchat')">
          <div class="left userlogo-div" >
            <img :src="item.userlogo" class="userlogo cursor">
          </div>
          <div class="userlogo-div">
            <span class="padding-left10">{{item.username}}</span>
            <span class="badge" v-if="item.unReadNumber">{{item.unReadNumber}}</span>
          </div>
        </div>
      </div>

      <!-- webscoket 聊天界面 -->
      <div v-else-if="webscoketStatus == 'webscoketChat'">
        <!-- 聊天记录 -->
        <div class="dialog-chat">
          <div class="chat" id="chat-dialog">
            <div v-for="(item, index) in chatRecordList" :key="index" :class="item.classs == 'left' ? 'leftd' : 'rightd'">
                <span :class="item.classs == 'left' ? 'leftd_h' : 'rightd_h'"  v-if="item.msg">
                    <img :src="item.userlogo" class="logo cursor" />
                </span>
                <div :class="item.classs == 'left' ? 'speech left' : 'speech right'"  v-html="item.msg"  v-if="item.msg"> </div>
            </div>
            <!-- <p v-for="(item, index) in chatRecordList" :key="index" :class="item.class">
                <div class="item.class">
                  <img src="" />
                </div> 
                <div v-html="item.msg" class="item.class"></div>
            </p> -->
          </div>
        </div>
        <!-- 发送消息editor -->
        <div class="editor-div">
          <Wangeditor v-on:getWangEditorValue="getWangEditorReplayValue" placeholder="按 alt + R 发送消息！"></Wangeditor>
        </div>
        <!-- 按钮列表 -->
        <div class="button-div">
          <button class="button button-cancel" @click="goBackUserList()" >返回</button>
          <button class="button button-send right" @click="sendButtonClick()">发送</button>
        </div>
      </div>


    </div>
  </div>
</template>
<script lang='ts'>
  // 引入js文件
  import Drawer from "/@/assets/js/components/pc/Drawer";
  // 使用js对象
  export default {
    ...Drawer,
  };
</script>
<style lang="scss" scoped>
    @import "../../assets/css/components/pc/Drawer.scss";
</style>